<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title></head>
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/bar.css"/>
<style type=text/css>
    * {
        margin: 0;
        padding: 0;
    }

    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    #loginDiv {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
        border-radius: 5px;
    }

    #name_trip {
        margin-left: 50px;
        color: red;
    }

    p {
        margin-top: 30px;
        margin-left: 20px;
        color: #26b3b3;
    }

    input {
        margin-left: 15px;
        border-radius: 5px;
        border-style: hidden;
        height: 30px;
        width: 140px;
        background-color: rgba(216, 191, 216, 0.5);
        outline: none;
        color: #000000;
    }

    .button {
        border-color: cornsilk;
        background-color: rgba(100, 149, 237, .7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 100px;
        height: 31px;
        font-size: 16px;
    }

    input {
        margin-top: 10px
    }
    label {  width:150px;  text-align:right; margin-left: 30px;}
</style>
<body>
<div id="main">
    <div id="loginDiv">
        <form action="/Login" method="post">
            <h1 style="text-align: center;color: #6489d5;">LOGIN</h1>
            <p><label>用户名：</label><input id="username" type="text" name="username"><label id="name_trip"></label></p>
            <p><label>密码：</label><input id="pwd1" type="password" name="pwd1"><label id="password_trip"></label></p>

            <div style="text-align: center;margin-top: 30px;">
                <input type="submit" class="button" value="登录">
                <br>
                <input type="button" class="button" value="注册" id="regist">
            </div>
        </form>
    </div>

</div>


<script type="text/javascript">
    var username = $("#username").val();
    $("#username").blur(function () {
        username = $("#username").val();
        $.post("/CheckUserID", {username: username}, function (rtnSvr) {
            console.log(rtnSvr)
            if (username.length != 0) {
                if (rtnSvr != "0") {
                    alert("该用户不存在")
                    $("#username").val("")
                    return false
                }
            }
        })
    });
    $("form").submit(function () {
        var username = $("#username").val();
        var pwd1 = $("#pwd1").val();
        if (pwd1.length == 0 || username.length == 0) {
            alert("输入不能为空")
            return false;
        }
        $.post("/CheckUser",{username:username,pwd1:pwd1},function (data){
            if (data== '0'){
                alert("密码输入错误")
                return false
            }

        })
    });
    $("#regist").click(function (){
        $(location).attr("href","signin")
    })
</script>

</body>
</html>